<template>
  <div id="identiy">
    <div class="user-input">
      <md-field>
        <md-input-item v-model="userInfo.nickname" :readonly="true" title="昵称" type="text">
          <div class="change-name" @click="nameDialog = true" slot="right">变更昵称</div>
        </md-input-item>
        <md-input-item title="手机号" type="text" :readonly="true" :value="password_mobile">
          <div class="change-mobile" @click="mobileDialog = true" slot="right">变更手机号</div>
        </md-input-item>
        <!-- <md-input-item ref="input2" readonly title="注册时间" value="2019年7月3日"></md-input-item> -->
      </md-field>
    </div>
    <!-- 修改 ： 信息列表 -->
    <div class="identity-info-list">
      <ul>
        <li v-if="userInfo.company_name">
          <strong>公司</strong>
          <p>{{userInfo.company_name}}</p>
        </li>
        <li>
          <strong>姓名</strong>
          <p>{{userInfo.name}}</p>
          <!-- <span class="change-identity">变更授权代表</span> -->
        </li>
        <li>
          <strong>性别</strong>
          <p>{{userInfo.sex}}</p>
        </li>
        <li>
          <strong>民族</strong>
          <p>{{userInfo.minority}}族</p>
        </li>
        <li>
          <strong>出生日期</strong>
          <p>{{userInfo.birth_date}}</p>
        </li>
        <li>
          <strong>身份证地址</strong>
          <p>{{userInfo.address}}</p>
        </li>
        <li>
          <strong>身份证号</strong>
          <p>{{password_idcard_num}}</p>
        </li>
        <li>
          <strong>签发机关</strong>
          <p>{{userInfo.organization}}</p>
        </li>
        <li>
          <strong>有效期限</strong>
          <p>{{userInfo.idcard_begin_date}}-{{userInfo.idcard_end_date}}</p>
        </li>
      </ul>
    </div>
    <!-- 按钮区 -->
    <div class="btn-block">
      <!-- 修改 -->
      <md-button round type="primary" size="small" @click="saveUserInfo">保存</md-button>
    </div>
    <!-- 修改昵称dialog -->
    <div class="name-dialog-wrap" v-if="nameDialog">
      <div class="mark"></div>
      <div class="name-dialog">
        <div class="md-dialog-body">
          <p class="title">请输入昵称</p>
          <input type="text" v-model="userInfo.nickname" />
        </div>

        <div class="md-dialog-actions">
          <!-- <p class="cancel" @click="nameDialog == false">取消</p> -->
          <p class="comfirm" @click="nameDialog = false">确认</p>
        </div>
      </div>
    </div>
    <!-- 修改手机号dialog -->
    <div class="name-dialog-wrap" v-if="mobileDialog">
      <div class="mark"></div>
      <div class="name-dialog">
        <div class="md-dialog-body">
          <p class="title">验证手机号</p>
          <input class="mobile-input" type="text" v-model="newMobile" placeholder="请输入新号码" />
          <div class="op-code">
            <span class="get-code" @click="getCode" v-if="!showCountDown">获取验证码</span>
            <span v-else class="count-down">{{countDown}}s后重新获取</span>
          </div>

          <input type="text" v-model="code" placeholder="请输入验证码" />
        </div>

        <div class="md-dialog-actions">
          <p class="cancel" @click="mobileDialog = false">取消</p>
          <p class="comfirm" @click="checkedCode">确认</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import { Tag, Toast, Button, InputItem, Field, FieldItem } from "mand-mobile";

export default {
  components: {
    [Tag.name]: Tag,
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field
  },
  name: "identiy",
  data() {
    return {
      showMobile: "",
      newMobile: "", //
      userInfo: {}, //用户信息
      nameDialog: false,
      mobileDialog: false,
      code: "", //验证码
      showCountDown: false, //是否显示倒计时
      countDown: 59 //倒计时
    };
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    },
    password_idcard_num() {
      if (this.userInfo.idcard_num) {
        return this.userInfo.idcard_num.slice(0, 10) + "********";
      }
    },
    password_mobile() {
      return (
        this.showMobile.slice(0, 3) + "****" + this.showMobile.slice(7, 11)
      );
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      let newMobile = this.newMobile;
      if (newMobile == "") {
        Toast.failed("请先输入手机号");
        return;
      }
      this.showCountDown = true;
      let timer = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          clearInterval(timer);
          this.countDown = 59;
          this.showCountDown = false;
        }
      }, 1000);
      let params = {
        mobile: newMobile
      };
      https
        .fetchPost(config.getCode, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed("已发送验证码", 2000);
          } else {
            clearInterval(timer);
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 验证验证码
    checkedCode() {
      let mobile = this.newMobile;
      let code = this.code;
      let params = {
        mobile,
        code
      };
      https
        .fetchPost(config.checkCode, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed("验证成功", 2000);
            this.showMobile = this.newMobile;
            this.mobileDialog = false;
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getUserInfo() {
      let mobile = this.mobile;
      let params = {
        mobile
      };
      https
        .fetchPost(config.getUserInfo, params)
        .then(res => {
          if (res.data.code == 1) {
            this.userInfo = res.data.data.user;
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    saveUserInfo() {
      let newMobile = this.newMobile;
      if (newMobile == "") {
        newMobile = this.mobile;
      }
      let params = {
        mobile: this.mobile,
        newMobile,
        nickname: this.userInfo.nickname
      };
      https
        .fetchPost(config.saveUserInfo, params)
        .then(res => {
          console.log("返回", res.data);
          if (res.data.code == 1) {
            Toast.succeed("保存成功", 2000);
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.getUserInfo();
    this.showMobile = this.mobile;
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#identiy {
  .btn-block {
    background: #fff;
    padding: 70px 240px 0;
  }
  .identity-info-list {
    padding: 20px 30px;
    background: #fff;
    ul {
      li {
        position: relative;
        display: flex;
        height: 60px;
        align-items: center;
        strong {
          width: 170px;
          font-size: 30px;
          color: #888;
        }
        p {
          width: 520px;
          font-size: 28px;
          color: #333;
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .change-identity {
          position: absolute;
          right: 10px;
          font-size: 26px;
          color: $themeGold;
        }
      }
    }
  }
  .change-name,
  .change-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    width: 180px;
    height: 60px;
    border-radius: 40px;
    color: #41485d;
    border: 1px solid #c5cad5;
  }
  .save-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    width: 150px;
    height: 60px;
    background: #2f86f6;
    border-radius: 40px;
    //   color: #41485d;
    color: #fff;
    //   border: 1px solid #c5cad5;
    border: 1px solid #2f86f6;
  }
  .name-dialog-wrap {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    pointer-events: auto;
    z-index: 9;
    .mark {
      width: 100%;
      height: 100%;

      background-color: rgba(37, 38, 45, 0.7);
    }
    .name-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 606px;
      border: 1px solid #e2e4ea;
      border-radius: 12px;
      background-color: #fff;
      overflow: hidden;
      .md-dialog-body {
        position: relative;
        color: #666f83;
        font-size: 28px;
        text-align: left;
        padding: 52px;
        .title {
          color: #111a34;
          text-align: center;
          font-size: 32px;
          font-weight: 400;
          line-height: 1.2;
          margin: 0 0 28px;
        }
        input {
          width: 92%;
          height: 50px;
          border: 1px solid #e2e4ea;
          outline: none;
          padding: 0 4%;
          border-radius: 8px;
          &.mobile-input {
            margin-bottom: 30px;
            width: 60%;
          }
        }
        .op-code {
          position: absolute;
          right: 52px;
          top: 120px;
          display: flex;
          .get-code {
            width: 150px;
            height: 50px;
            background: #2f86f6;
            color: #fff;
            font-size: 26px;
            line-height: 50px;
            text-align: center;
            border-radius: 10px;
          }
          .count-down {
            width: 180px;
            height: 50px;
            margin-right: -20px;
            font-size: 22px;
            line-height: 50px;
            text-align: center;
          }
        }
      }

      .md-dialog-actions {
        position: relative;
        display: flex;
        .cancel,
        .comfirm {
          position: relative;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 100px;
          font-size: 36px;
          font-weight: 500;
          text-align: center;
          transition: background-color 0.3s;
          font-size: 28px;
          color: #2f86f6;
        }
        .cancel {
          color: #666f83;
          &::before {
            content: "";
            position: absolute;
            z-index: 2;
            transform: scaleX(0.5) translateX(100%);
            top: 0;
            right: 0;
            left: auto;
            bottom: auto;
            border-right: 2px solid #e2e4ea;
            height: 100%;
            transform-origin: 100% 50%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          z-index: 2;
          transform-origin: 100% 50%;
          transform: scaleY(0.5) translateY(-100%);
          top: 0;
          left: 0;
          right: auto;
          bottom: auto;
          width: 100%;
          border-top: 2px solid #e2e4ea;
          transform-origin: 50% 0;
        }
      }
    }
  }
}
</style>
